<!--  -->
<template>
  <div class="layout">
    <div class="investment-box">
      <NewBanner
        :image="require('@/assets/image/investment/banner.png')"
        @jump="$router.push({ path: '/investment/investmentSettled' })"
        style="height: 500px"
      ></NewBanner>
      <!-- 楼宇动态 -->
      <indexDynameics></indexDynameics>
      <!-- 热门楼宇 -->
      <div class="second">
        <Container
          title="热门楼宇"
          @jump="$router.push({ path: '/investment/investmentList' })"
          :isBold="true"
        >
          <template>
            <div class="cardBox">
              <div
                class="card"
                v-for="(item, index) in investmentList"
                :key="index"
                @click="details(item)"
              >
                <PublicImage
                  v-if="!item.buildingImages"
                  :src="require('@/assets/image/finance/product_dj.png')"
                ></PublicImage>
                <PublicImage
                  v-else-if="item.buildingImages.length == 0"
                  :src="require('@/assets/image/finance/product_dj.png')"
                ></PublicImage>
                <div v-else-if="item.buildingImages.length <= 1">
                  <PublicImage
                    v-if="item.buildingVideo"
                    :src="item.videoCover"
                    class="img"
                  ></PublicImage>
                  <!-- <img v-if="item.buildingVideo" class="img" v-lazy=" item.videoCover" /> -->
                  <PublicImage
                    v-else
                    v-for="(itemr, indexr) in item.buildingImages"
                    :key="indexr"
                    :src="itemr"
                    class="img"
                  ></PublicImage>
                  <!-- <img
                    class="img"
                    v-for="(itemr, indexr) in item.buildingImages"
                    :key="indexr"
                    v-lazy="itemr"
                    v-else
                  /> -->
                </div>
                <div v-else>
                  <PublicImage
                    v-if="item.buildingVideo"
                    :src="item.videoCover"
                    class="img"
                  ></PublicImage>
                  <PublicImage
                    v-else
                    :src="item.buildingImages[0] || item.buildingImages[1]"
                    class="img"
                  ></PublicImage>
                </div>
                <div class="messageBox">
                  <div class="messageTitle ellipsis">
                    {{ item.buildingName }}
                  </div>
                  <div class="row ellipsis">{{ item.address }}</div>
                  <div class="row ellipsis">
                    {{ getLeave(item.buildingLeave) }}
                  </div>
                  <div
                    v-if="item.floorType != 1 && item.floorType"
                    class="row ellipsis"
                  >
                    地上{{ item.aboveGroundFloors }}层<span
                      style="margin: 0 10px"
                      >地下{{ item.undergroundFloors }}层</span
                    >楼高{{ item.buildingHeight }}米
                  </div>
                  <div
                    v-if="item.floorType == 1 && item.floorType"
                    class="row ellipsis"
                  >
                    单层{{ item.buildingFloor }}层
                  </div>
                  <div class="tipsBox">
                    <div class="tips" v-if="item.industryType">
                      {{ getIndustry(item.industryType) }}
                    </div>
                    <div class="tips" v-if="item.buildingType">
                      {{ getType(item.buildingType) }}
                    </div>
                    <div class="tips" v-if="item.buildingDecorationType">
                      {{ getDecorationType(item.buildingDecorationType) }}
                    </div>
                    <div class="tips" v-if="item.canRegister">
                      {{ getRegister(item.canRegister) }}
                    </div>
                    <div class="tips" v-if="item.relatedPoliciesNum != 0">
                      政策扶持
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </Container>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import indexDynameics from "./components/index_dynamics";
import { getInvestmentList } from "@/common/api/investment";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    indexDynameics,
  },
  data() {
    //这里存放数据
    return {
      pageNum: 1,
      pageSize: 6,
      investmentList: [],
      industryList: [],
      leaveList: [],
      typeList: [],
      registerList: [],
      decorationType: [],
    };
  },
  //监听属性 类似于data概念
  computed: {
    // 产业领域
    getIndustry() {
      return function (data) {
        let turnList = this.industryList;
        let obj = turnList.find((item) => item.dictValue == data);
        return obj && obj.dictLabel;
      };
    },
    // 楼宇级别
    getLeave() {
      return function (data) {
        let turnList = this.leaveList;
        let obj = turnList.find((item) => item.dictValue == data);
        return obj && obj.dictLabel;
      };
    },
    // 是否可注册
    getType() {
      return function (data) {
        let turnList = this.typeList;
        let obj = turnList.find((item) => item.dictValue == data);
        return obj && obj.dictLabel;
      };
    },
    // 楼宇类型
    getRegister() {
      return function (data) {
        let turnList = this.registerList;
        let obj = turnList.find((item) => item.dictValue == data);
        return obj && obj.dictLabel;
      };
    },
    // 获取装修情况
    getDecorationType() {
      return function (data) {
        let turnList = this.decorationType;
        let obj = turnList.find((item) => item.dictValue == data);
        return obj && obj.dictLabel;
      };
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 跳转楼宇详情页
    details(item) {
      // console.log("item", item);
      this.$router.push({
        path: "/investment/investmentdetails",
        query: { id: item.id },
      });
    },
    // 字典查询
    async gettypeList() {
      let api = `building_industry,building_leave,building_type,building_register_state,building_decoration_type`;
      // 调用公共方法中的查询字典表
      this.getDictList(this, api).then((res) => {
        this.industryList = res.building_industry;
        this.leaveList = res.building_leave;
        this.typeList = res.building_type;
        this.registerList = res.building_register_state;
        this.decorationType = res.building_decoration_type;
      });
    },
    // 热门楼宇列表
    async getInvestmentList() {
      let obj = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      let { code, msg, rows, total } = await getInvestmentList(obj);
      if (code != "200") return this.$message.warning(msg);
      // console.log('res123', res)

      if (rows && rows.length) {
        this.investmentList = rows;
        this.investmentList.forEach((item, index) => {
          item.buildingImages = item.buildingImages.split(",");
        });
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getInvestmentList();
    this.gettypeList();
  },

  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.bg {
  height: 500px;
  img {
    // width: 1920px;
    width: 100%;
    height: 500px;
    object-fit: cover;
  }
}
.second {
  height: 1272px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  background: #f7f7f7;
  background-image: url("~@/assets/image/investment/bgSecond.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 30px 0 90px;
  background-position: center top;

  .cardBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .card {
      width: 380px;
      background: #ffffff;
      margin: 0 0px 31px 0;
      box-shadow: 4px 6px 10px 5px rgba(0, 19, 39, 0.06);
      cursor: pointer;

      .img {
        width: 380px;
        height: 240px;
      }

      .messageBox {
        padding: 19px 15px 4px;
        text-align: left;

        .messageTitle {
          font-size: 24px;
          font-weight: 700;
          margin-bottom: 21px;
        }

        .row {
          margin-bottom: 10px;
        }

        .row:last-child {
          margin-bottom: 15px;
        }

        .tipsBox {
          display: flex;
          flex-wrap: wrap;

          .tips {
            width: 90px;
            height: 28px;
            line-height: 18px;
            background: #02c797;
            border-radius: 3px;
            padding: 7px 10px;
            margin: 0px 9px 11px 0;
            color: #ffffff;
            display: flex;
            justify-content: center;
          }
        }
      }
    }
  }
}
</style>
